import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Box, Typography } from '@mui/material';

const AppStoreCardFade = ({
  image,
  title,
  subtitle,
  paddingX = 2,
  paddingY = 2,
  borderRadius = 4,
  headerSize = 'h4',
  subHeaderSize = 'body1',
  textColor = '#ffffff',
  backdropColor = '#000000',
  backdropOpacity = 0.7,
  speed = 0.5, // Animation speed/duration in seconds
  children,
}) => {
  const [isOpen, setIsOpen] = useState(false);

  // Use a consistent easing curve across all animations
  const ease = [0.2, 0.0, 0.0, 1.0];
  
  // Text animation variants
  const titleVariants = {
    hidden: { opacity: 0, x: -30 },
    visible: { 
      opacity: 1, 
      x: 0,
      transition: { 
        duration: speed * 0.8, 
        ease,
        delay: speed * 0.4
      }
    }
  };
  
  const subtitleVariants = {
    hidden: { opacity: 0, x: 30 },
    visible: { 
      opacity: 1, 
      x: 0,
      transition: { 
        duration: speed * 0.8, 
        ease,
        delay: speed * 0.6
      }
    }
  };
  
  const contentVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: { 
        duration: speed * 0.8, 
        ease,
        delay: speed * 0.8
      }
    }
  };

  return (
    <>
      {/* Always mounted card (closed version) */}
      {!isOpen && (
        <Box
          onClick={() => setIsOpen(true)}
          sx={{
            position: 'relative',
            width: '100%',
            height: '100%',
            borderRadius,
            overflow: 'hidden',
            cursor: 'pointer',
            boxShadow: '0px 4px 12px rgba(0,0,0,0.1)',
          }}
        >
          {/* Background */}
          <Box
            sx={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundImage: `url(${image})`,
              backgroundSize: '130%',
              backgroundPosition: 'left center',
              backgroundRepeat: 'no-repeat',
              filter: 'brightness(0.9)',
              transition: `all ${speed}s ease`,
            }}
          />

          {/* Overlay */}
          <Box
            sx={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              height: '100%',
              background: 'linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.2))',
              zIndex: 1,
            }}
          />

          {/* Text */}
          <Box
            sx={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              padding: `${paddingY}rem ${paddingX}rem`,
              zIndex: 2,
            }}
          >
            <Typography
              variant={headerSize}
              sx={{
                color: textColor,
                fontWeight: 'bold',
                textShadow: '0px 2px 4px rgba(0,0,0,0.3)',
              }}
            >
              {title}
            </Typography>
            <Typography
              variant={subHeaderSize}
              sx={{
                color: textColor,
                textShadow: '0px 1px 3px rgba(0,0,0,0.3)',
              }}
            >
              {subtitle}
            </Typography>
          </Box>
        </Box>
      )}

      {/* Open modal version */}
      <AnimatePresence>
        {isOpen && (
          <>
            {/* Backdrop */}
            <Box
              component={motion.div}
              initial={{ opacity: 0 }}
              animate={{ opacity: backdropOpacity }}
              exit={{ opacity: 0 }}
              transition={{ duration: speed, ease }}
              onClick={() => setIsOpen(false)}
              sx={{
                position: 'fixed',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: backdropColor,
                zIndex: 50,
              }}
            />

            {/* Expanded card */}
            <Box
              component={motion.div}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: speed, ease }}
              onClick={() => setIsOpen(false)}
              sx={{
                position: 'fixed',
                top: 'calc(50vh - 40vh)',
                left: 'calc(50vw - 45vw)',
                width: '90vw',
                height: '80vh',
                borderRadius,
                overflow: 'hidden',
                boxShadow: '0px 10px 30px rgba(0,0,0,0.3)',
                zIndex: 100,
                cursor: 'pointer',
              }}
            >
              <Box
                component={motion.div}
                animate={{
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  filter: 'brightness(1)',
                }}
                transition={{ duration: speed, ease }}
                sx={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  backgroundImage: `url(${image})`,
                  backgroundRepeat: 'no-repeat',
                  zIndex: 0,
                }}
              />

              <Box
                sx={{
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
                  right: 0,
                  height: '30%',
                  background: 'linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0))',
                  zIndex: 1,
                }}
              />

              <Box
                sx={{
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
                  right: 0,
                  padding: `${paddingY}rem ${paddingX}rem`,
                  zIndex: 2,
                }}
              >
                <Typography
                  component={motion.div}
                  variants={titleVariants}
                  initial="hidden"
                  animate="visible"
                  variant={headerSize}
                  sx={{
                    color: textColor,
                    fontWeight: 'bold',
                    textShadow: '0px 2px 4px rgba(0,0,0,0.3)',
                  }}
                >
                  {title}
                </Typography>
                <Typography
                  component={motion.div}
                  variants={subtitleVariants}
                  initial="hidden"
                  animate="visible"
                  variant={subHeaderSize}
                  sx={{
                    color: textColor,
                    textShadow: '0px 1px 3px rgba(0,0,0,0.3)',
                  }}
                >
                  {subtitle}
                </Typography>

                {children && (
                  <Box
                    component={motion.div}
                    variants={contentVariants}
                    initial="hidden"
                    animate="visible"
                    sx={{ marginTop: 3, color: textColor }}
                  >
                    {children}
                  </Box>
                )}
              </Box>
            </Box>
          </>
        )}
      </AnimatePresence>
    </>
  );
};

export default AppStoreCardFade;

